import React,{Suspense,lazy} from'react';
import {Link,Routes,Route} from 'react-router-dom'
// import Home from './pages/Home/index.jsx'
// import About from './pages/About/index.jsx'
// lazy 懒加载  当路由匹配到这个组件的时候，才会加载这个组件
const Home = lazy(() => import('./pages/Home/index.jsx'))
const About = lazy(() => import('./pages/About/index.jsx'))

const App = () => {
  return (
    <div>
      <Link to='/'>Home</Link>
      <Link to='/about'>About</Link>

      {/* Suspense 是一个组件，它可以包裹一个异步组件，当异步组件加载完成后，它会渲染出异步组件的内容，否则它会渲染出一个 fallback 组件
      当异步组件加载完成后，它会渲染出异步组件的内容，否则它会渲染出一个 fallback 组件 */}
      <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='/about' element={<About />}></Route>
      </Routes>
      </Suspense>
    </div>
  );
};
export default App;